<template>
  <div>
    <el-button type="text" @click="handleCollapse">点击</el-button>
    <!--导航菜单-->
    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :unique-opened="true" @open="handleOpen"
             @close="handleClose" :collapse="isCollapse" :router="true" :collapse-transition="false">
      <template v-for="(item) in routers" v-if="!item.hidden">
        <el-submenu v-bind:key="item.path" :index="item.path" v-if="item.children.length > 0">
          <template slot="title"><i :class="item.iconCls">&nbsp;</i><span slot="title">{{item.name}}</span></template>
          <el-menu-item v-for="(child) in item.children" :index="child.path && child.path.indexOf('/')>=0 ? child.path : item.path+'/'+child.path" :key="item.path+'/'+child.path" v-if="!child.hidden">
            <!--{{child.name}}-->
            <template slot="title"><i :class="child.iconCls">&nbsp;</i><span slot="title">{{child.name}}</span></template>
          </el-menu-item>
        </el-submenu>
        <el-menu-item v-if="!item.children" :index="item.path" v-bind:key="item.path">
          <!--<i :class="item.iconCls"></i>-->
          <!--<span slot="title">{{item.name}}</span>-->
          <template slot="title"><i :class="item.iconCls" style="margin-right: 5px"></i><span slot="title">{{item.name}}</span></template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<script>
import {mapState, mapGetters} from 'vuex'
/// 不能直接将menuConfig.js中数据引过来,猜测由于路由引入了,会改变menuConfig.js中hiden属性
import {getMenu} from '@/utils/session'
export default {
  name: 'NavMenu',
  data: function () {
    return {
      menuTreeNode: '',
      // menuItems: this.$router.options.routes,
      menuItems: getMenu(),
      resourceFilter: [],
      routers: []
    }
  },
  computed: {
    ...mapState(['navMenuSpan', 'isCollapse']),
    ...mapGetters(['navMenuSpan', 'resources'])
  },
  methods: {
    generatorRouter () {
      console.log('------- 开始初使化菜单 -------')
      // 当这个用户刚创建,还没有进行授权时,那么它的权限是null
      this.resourceFilter = this.resources ? this.resources.filter((resource) => {
        if (resource.indexOf('query') > 1 || resource.indexOf('page') > 1) {
          return true
        } else {
          return false
        }
      }) : []
      this.generatorRoutersFormMenu(this.menuItems, this.routers)
    },
    generatorRoutersFormMenu (menu = []) {
      // console.log(menu)
      let tempRouters = []
      let _this = this
      // 当hidden为true时,那么直接添加至路由里
      menu.forEach((item) => {
        let temp = {}
        // 先判断是否有当前菜单的权限,再判断子菜单,若当前菜单无权限,则子菜单不用判断
        if (item.hidden === false) {
          _this.setItem(temp, item)
        }
        if (item.hidden === undefined || item.hidden === true) {
          _this.resourceFilter.forEach((res) => {
            // console.log('item---item.security')
            // console.log(item)
            if (item.meta !== undefined && item.meta.security !== undefined && res === item.meta.security) {
              // console.log(res.url + ':' + item.path)
              item.hidden = false
              _this.setItem(temp, item)
            }
          })
        }
        // 若当前菜单无权限,则子菜单不用判断
        if (item.children && item.children.length > 0 && !item.hidden) {
          temp = this.getTree(item.children, temp)
        }
        if (JSON.stringify(temp) === '{}') {

        } else {
          tempRouters.push(temp)
        }
      })
      /// 最后应显示的菜单
      console.log('最后应显示的菜单:  ')
      console.log(tempRouters)
      _this.routers = tempRouters
    },
    getTree (menu = [], temp = {}) {
      menu.forEach((item) => {
        let child = {}
        if (item.hidden === false) {
          this.setItem(child, item)
        }
        // 以下几种情况,当hidden没有配置时,为空时,还有就是配置为true的时候
        // 如果能在数据库里有权限,那么菜单将显示
        if (!item.hidden || item.hidden) {
          // console.log(this.resourceFilter)
          this.resourceFilter.forEach((res) => {
            if (item.meta !== undefined && item.meta.security !== undefined && res === item.meta.security) {
              console.log(item.meta.security + ':' + res)
              item.hidden = false
              this.setItem(child, item)
            }
          })
        }
        if (item.children && item.children.length > 0) {
          child = this.getTree(item.children, child)
        }
        if (!temp.children) {
          temp.children = []
        }
        // 判断是否为空对象,空对象不再添加至路由里
        if (JSON.stringify(child) === '{}') {

        } else {
          temp.children.push(child)
        }
      })
      return temp
    },
    setItem (temp = {}, item = {}) {
      temp.name = item.name
      temp.path = item.path
      temp.iconCls = item.iconCls
      temp.component = item.component
      temp.hidden = item.hidden
      temp.meta = item.meta
    },
    renderMenu (data) {
      data.map((item) => {
        if (item.children) {
          return ''
        }
      })
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    handleCollapse () {
      if (this.isCollapse) {
        this.$store.dispatch('setCollapse', false)
      } else {
        this.$store.dispatch('setCollapse', true)
      }
    }
    // ...mapActions(['setNavMenuSpan'])
  },
  mounted: function () {
    console.log(this.menuItems)
    this.generatorRouter()
    console.log('navMenu this.routers:')
    console.log(this.routers)
  },
  beforeCreate: function () {
  }
}
</script>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    min-width: 200px;
    min-height: 400px;
  }
</style>
